<template>
  <view class="page-container">
    <!-- 头部区域 -->
    <view class="header-fixed">
      <!-- 头部导航布局模块 -->
      <view class="header">
        <!-- 设计一个组件，计算文字离顶部距离 -->
        <!-- 盒子存放文字的地方 -->
        <view class="header-content">
          <!-- Logo -->
          <view class="logo">
            <image src="../..//static/picture/img.png" mode="aspectFit"></image>
          </view>
          <!-- 标题 -->
          <view class="title-box">
            <text class="title">鱼泡校园圈</text>
            <view class="subtitle-box">
                <view class="school-picker" @click="openMap">
                  <text class="school-text">{{ districtAddress || '获取地址中...' }}</text>
                  <!-- 可添加箭头图标提示可点击 -->
                  <image src="../../static/picture/arrow-right.png" mode="aspectFit" class="arrow"></image>
                </view>
            </view>
          </view>
          <!-- 搜索图标 -->
          <view class="search-icon">
            <image src="../../static/picture/search.png" mode="aspectFit" @click="onSearch"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <status-bar></status-bar>
      <status-bar></status-bar>
      <status-bar></status-bar>
      <status-bar></status-bar>
      <!-- 轮播图 -->
      <home-swiper height="320rpx" />
      <!-- 功能入口 -->
      <view class="statusHeight"></view>
      <home-staticIcons></home-staticIcons>

      <!-- 热榜区域 -->
      <hot-list title="校园热榜" />

      <!-- 帖子列表 -->
      <post-list />
    </view>
    <custom-tabbar />
  </view>
  <!-- 悬浮球组件 -->
  <FloatingBall />
  <AiChat />
</template>
<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app'
import CustomTabbar from '@/components/custom-tab-bar/my-custom-tab-bar.vue'
import FloatingBall from "@/components/floating-ball/FloatingBall.vue";
import AiDialog from "@/components/AiDialog/AiDialog.vue";
// 控制AI对话框显示状态
const showAiDialog = ref(false);
const districtAddress = ref('');

// 页面加载和显示时获取区级地址
onLoad(() => getDistrictAddress());
// 在onShow钩子中添加检查选中建筑的逻辑
onShow(() => {
  getDistrictAddress();
  // 检查是否有选中的建筑
  const selectedBuilding = wx.getStorageSync('selectedBuilding');
  if (selectedBuilding) {
    districtAddress.value = selectedBuilding;
    // 清除存储的选中建筑，避免下次打开仍显示
    wx.removeStorageSync('selectedBuilding');
  }
});

// 从本地存储获取区级地址
const getDistrictAddress = () => {
  const storedDistrict = wx.getStorageSync('districtAddress');
  if (storedDistrict) {
    districtAddress.value = storedDistrict;
  }
};

// 点击地址打开地图页面
const openMap = () => {
  uni.navigateTo({
    url: '/pages/map/map' // 根据实际map页面路径调整
  });
};

// 搜索点击事件
const onSearch = () => {
 uni.navigateTo(
     {
       url: '/pages/search/search',
     }
 )
};
// ai助手
const handleClick = () => {
uni.navigateTo({
  url: '/pages/AIChat/AIChat'
});
}
</script>
<style lang="scss">
.statusHeight {
  height: 15px;
  width: 100%;
}

page {
  background-color: #f5f7fa;
}

.page-container {
  padding-bottom: 30rpx;
}

.header-fixed {
  position: fixed;
  z-index: 9;
  width: 100%;
  top: 0; // 状态栏和 header 顶部对齐
  left: 0rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 30rpx;
  height: 220rpx;
  background: linear-gradient(to right, #8cf156, #a8f3a8); // 设置渐变色
  background-size: 100% 100%;
}

// 状态栏背景颜色与 header 一致
::v-deep .uni-status-bar {
  background: linear-gradient(to right, #8cf156, #fffefb);
}

.header-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.logo {
  width: 80rpx;
  height: 80rpx;
  align-self: flex-end;
  image {
    width: 100%;
    height: 100%;
  }
}

.title-box {
  margin-top: 60rpx;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 40rpx;
  color: black;
  font-weight: bold;
}

.subtitle-box {
  display: flex;
  align-items: center;
}

.school-picker {
  display: flex;
  align-items: center;
  margin-left: 10rpx;
  color: black;

  .school-name {
    font-size: 24rpx;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
  }
}

.search-icon {
  width: 50rpx;
  height: 50rpx;
  margin-left: 80rpx;
  align-self: flex-end;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
}

.content {
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 100rpx; // 为 header 留出空间
}
/* 新增箭头图标样式（可选） */
.arrow {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
  vertical-align: middle;
}
</style>

